<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>----插值----</h2>
        <p>----{{content}}----</p>
        <p>----{{content.toUpperCase()}}----</p>

        <h2>----指令---------------</h2>
        <h2>强制绑定数据</h2>
        <a href="url">GOGO</a><br>
        <a v-bind:href="url">GOGO</a><br>
        <a :href="url">GOGO</a><br>

        <h2>强制绑定事件</h2>
        <button onclick="handleClick">点击</button><br>
        <button v-on:click="handleClick">点击</button><br>
        <button @click="handleClick">点击</button><br>

    </div>
    <script src="../day02/js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                content:"I will kill you",
                url:'https://www.atguigu.com'
            }, 
            methods:{
                handleClick(event){
                    alert(event.target.innerHTML);
                }
            }
        })
    </script>
</body>
</html>